<table class="table">
  <tbody>
    <tr>
      <td>头部</td>
      <td>包含当前列表标题</td>
    </tr>
    <tr>
      <td>列表</td>
      <td>多个列表部分请使用<code>section</code></td>
    </tr>
    <tr>
      <td>底部</td>
      <td>底部显示页码及其他提示信息</td>
    </tr>
  </tbody>
</table>
<p>一般内容列表视图</p>
<div contenteditable="false" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Contents List  <small>26 articles</small></h3>
    </header>
    <section class="items items-hover">
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><span class="label label-success">NEW</span>  <a href="###">Lorem
          ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#" class="text-muted">243</a>  <span class=
          "text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
<p>一个更紧凑的视图</p>
<div contenteditable="true" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list list-condensed">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Contents List  <small>26 articles</small></h3>
    </header>
    <section class="items items-hover">
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><span class="label label-success">NEW</span>  <a href="###">Lorem
          ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#" class="text-muted">243</a>  <span class=
          "text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
          necessitatibus, animi magni illo vel ducimus quia dolorum modi
          temporibus iste fugit laudantium minima minus sit debitis. Autem
          voluptate dolorum saepe!
        </div>
        <div class="item-footer">
          <a href="#">243</a>  <span class="text-muted">2013-11-11
          16:14:37</span>
        </div>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
<p>带项目缩略图</p>
<div contenteditable="ture" spellcheck="false" class="example">
  <br>
  <ul class="breadcrumb breadcrumb-block">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
  </ul>
  <div class="list">
    <header>
      <div class="pull-right btn-group" data-toggle="buttons-radio"></div>
      <h3>Contents List  <small>26 articles</small></h3>
    </header>
    <section class="items items-hover">
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><span class="label label-success">NEW</span>  <a href="###">Lorem
          ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          <div style="width:200px;height:100px;line-height:100px" class=
          "media pull-left media-place-holder">
            200x100
          </div>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
            necessitatibus, animi magni illo vel ducimus quia dolorum modi
            temporibus iste fugit laudantium minima minus sit debitis. Autem
            voluptate dolorum saepe!
          </div>
        </div>
        <div class="item-footer">
          <span class="label">tag1</span>   <a href="#" class="text-muted">
          243</a>  <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><span class="label label-success">NEW</span>  <a href="###">Lorem
          ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          <div style="width:200px;height:100px;line-height:100px" class=
          "media pull-left media-place-holder">
            200x100
          </div>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
            necessitatibus, animi magni illo vel ducimus quia dolorum modi
            temporibus iste fugit laudantium minima minus sit debitis. Autem
            voluptate dolorum saepe!
          </div>
        </div>
        <div class="item-footer">
          <span class="label">tag1</span>   <a href="#" class="text-muted">
          243</a>  <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><span class="label label-success">NEW</span>  <a href="###">Lorem
          ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          <div style="width:200px;height:100px;line-height:100px" class=
          "media pull-right media-place-holder">
            200x100
          </div>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
            necessitatibus, animi magni illo vel ducimus quia dolorum modi
            temporibus iste fugit laudantium minima minus sit debitis. Autem
            voluptate dolorum saepe!
          </div>
        </div>
        <div class="item-footer">
          <span class="label">tag1</span>   <a href="#" class="text-muted">
          243</a>  <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><span class="label label-success">NEW</span>  <a href="###">Lorem
          ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          <div style="width:200px;height:100px;line-height:100px" class=
          "media pull-right media-place-holder">
            200x100
          </div>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
            necessitatibus, animi magni illo vel ducimus quia dolorum modi
            temporibus iste fugit laudantium minima minus sit debitis. Autem
            voluptate dolorum saepe!
          </div>
        </div>
        <div class="item-footer">
          <span class="label">tag1</span>   <a href="#" class="text-muted">
          243</a>  <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><span class="label label-success">NEW</span>  <a href="###">Lorem
          ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          <div style="height:100px;line-height:100px" class=
          "media media-place-holder">
            200x100
          </div>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
            necessitatibus, animi magni illo vel ducimus quia dolorum modi
            temporibus iste fugit laudantium minima minus sit debitis. Autem
            voluptate dolorum saepe!
          </div>
        </div>
        <div class="item-footer">
          <span class="label">tag1</span>   <a href="#" class="text-muted">
          243</a>  <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right">
            <a href="###">edit</a>  <a href="#"> delete</a>
          </div>
          <h4><span class="label label-success">NEW</span>  <a href="###">Lorem
          ipsum dolor sit amet.中文标题测试</a></h4>
        </div>
        <div class="item-content">
          <div style="height:100px;line-height:100px" class=
          "media media-place-holder">
            200x100
          </div>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi,
            necessitatibus, animi magni illo vel ducimus quia dolorum modi
            temporibus iste fugit laudantium minima minus sit debitis. Autem
            voluptate dolorum saepe!
          </div>
        </div>
        <div class="item-footer">
          <span class="label">tag1</span>   <a href="#" class="text-muted">
          243</a>  <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
    </section>
    <footer>
      <ul class="pager">
        <li class="previous">
          <a href="#">« 上一页</a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li class="active">
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">⋯</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li class="next">
          <a href="#">下一页 »</a>
        </li>
      </ul>
    </footer>
  </div>
</div>
